<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .form-ss{
        width: 20% !important;
    }
</style>
<body>
  <div th:insert="common.html"></div>
  <input type="button" onclick="insertInfo()" class="btn btn-info" value="增加"/>
  <input type="button" class="btn btn-danger" onclick="deleteInfo()" value="批量删除">
  <div class="form-ss">
      <label class="sr-only" for="cname">名称</label>
      <input type="text" class="form-control" name="cname" id="cname" placeholder="请输入名称">
      <label class="sr-only" for="ctype">名称</label>
      <select class="form-control" id="ctype" name="ctype">
          <option value="-1">请选择</option>
          <option value="1">轿车</option>
          <option value="2">客车</option>
          <option value="3">越野车</option>
          <option value="4">牵引车</option>
      </select>
  </div>
  <input type="button" onclick="getData()" class="btn btn-default" value="搜索"/>
  <table id="table"></table>
</body>
</html>
<script>
      $('#table').bootstrapTable({
          //请求地址
          url: '/car/findAll',
          search:true,
          method : "GET",
          striped: true,//是否显示行间隔色
          cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
          pagination: true,//是否显示分页（*）
          sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
          pageNumber: 1,//初始化加载第一页，默认第一页,并记录
          pageSize: 2,//每页的记录行数（*）
          pageList: [1,3,5],//可供选择的每页的行数（*）
          //strictSearch: true,//严格搜索
          showColumns: true,//是否显示所有的列（选择显示的列）
          showRefresh: true,//是否显示刷新按钮
          clickToSelect: true,//是否启用点击选中行
          toolbar: '#toolbar',

          //得到查询的参数
          queryParams : function (params) {
          //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
          var temp = {
          /* pageSize: params.limit,//页面大小
           pageNum: (params.offset / params.limit) + 1,//页码*/
          pageNumber:(params.offset / params.limit) + 1,
          pageSize:params.limit,
          cname : $("#cname").val(),
          ctype : $("#ctype").val(),
    };
         return temp;
    },

      //列
        columns: [
                {
                      checkbox: true,
                      visible: true  //是否显示复选框

                },{
                      field: 'cid',
                      title: 'ID'
                }, {
                      field: 'cname',
                      title: '品牌'
                }, {
                      field: 'cdate',
                      title: '生产日期'
                }, {
                      field: 'cimg',
                      title: '图片',
                      formatter : function (value, row, index) {
                          return "<img width='200px' height='100px' src='/file/download?filename=" + value + "'>";
                      }
                },{
                      field: 'ctype',
                      title: '车型',
                      formatter : function (value, row, index) {
                        if (value == 1){
                            return "轿车";
                        }else if (value == 2){
                            return "客车";
                        }else if (value == 3){
                            return "越野车";
                        }else{
                            return "牵引车";
                        }
                    }

                },{
                    field: 'ccontent',
                    title: '介绍',
                },{
                      title: "操作",
                      formatter : function (value, row, index) {
                      var id = row.cid;
                      var result = "";
                      result += "<a href='javascript:toUpdate("+id+")' class='btn btn-xs blue'  title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                      result += "<a href='javascript:deleteInfoById("+id+")' class='btn btn-xs red'  title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

                      return result;
                    }
                }
         ]
    });

      function getData(){
         $("#table").bootstrapTable("refresh")
      }

      //增加
      function insertInfo(){
          BootstrapDialog.show({
              title: '提示',
              message: $('<div></div>').load('/car/add'),
              size: BootstrapDialog.SIZE_WIDE,
              buttons: [{
                  label: '取消',
                  action: function (dialog) {
                      dialog.close();
                  }
              }, {
                  label: '确定',
                  action: function (dialog) {
                      var contentValue = CKEDITOR.instances.ccontent.getData();
                      $("[name=ccontent]").val(contentValue);
                      $.ajax({
                          url : "/car/saveInfo",
                          type : "post",
                          dataType : "json",
                          data : $("#form_id").serialize(),
                          success : function (data){
                              if(data == true){
                                  toastr. success("增加成功")
                                  dialog.close();
                                  location.reload();
                              }else{
                                  toastr. error("增加失败")
                              }
                          },
                          error : function (data){
                              alert("网络连接失败")
                          }
                      })
                  }
              }]
          });
      }
      //修改
      function toUpdate(cid){
          BootstrapDialog.show({
              title: '提示',
              message: $('<div></div>').load('/car/getUpdate?cid='+cid),
              size: BootstrapDialog.SIZE_WIDE,
              buttons: [{
                  label: '取消',
                  action: function (dialog) {
                      dialog.close();
                  }
              }, {
                  label: '确定',
                  action: function (dialog) {
                      var contentValue = CKEDITOR.instances.ccontent.getData();
                      $("[name=ccontent]").val(contentValue);
                      $.ajax({
                          url : "/car/updateInfo",
                          type : "post",
                          dataType : "json",
                          data : $("#form_id").serialize(),
                          success : function (data){
                              if(data == true){
                                  toastr. success("修改成功")
                                  dialog.close();
                                  location.reload();
                              }else{
                                  toastr. error("修改失败")
                              }
                          },
                          error : function (data){
                              toastr. error("网络连接失败")
                          }
                      })
                  }
              }]
          });
      }
      //删除
      function deleteInfoById(cid){
          if(confirm("确认删除吗?")){
              $.ajax({
                  url : "/car/deleteInfo?cid="+cid,
                  type : "post",
                  dataType : "json",
                  data : $("#form_id").serialize(),
                  success : function (data){
                      if(data == true){
                          toastr.success("删除成功")
                          getData();
                      }else{
                          toastr.warning("删除失败")
                      }
                  },
                  error : function (data){
                      toastr. error("网络连接失败")
                  }
              })
          }
      }

      function deleteInfo(){
          var ids = [];
          var rows =  $("#table").bootstrapTable('getSelections');
          for (var i = 0; i <rows.length ; i++) {
              ids.push(rows[i].cid);
          }

          if(ids.length <= 0){
              toastr.error("请选择需要删除的行")
              return;
          }

          $.ajax({
              url : "/car/deleteById?cid="+ids,
              type : "get",
              dataType : "json",
              data : {ids : ids},
              success : function (result){
                  if(result > 0){
                      toastr.success("删除成功")
                      getData();
                  }else{
                      toastr.warning("删除失败")
                  }

              },
              error : function (result){
                  toastr.success("网络连接失败")
              }
          })

      }
</script>